<template>
  <div class="common-reply">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="通话记录" name="calls">
        <!-- 搜索|新增 -->
        <div class="set-parameters">
          <el-input
            v-model="callImei"
            class="device-wechat-id"
            size="small"
            placeholder="请输入设备号"
            clearable
            maxlength="30"
            show-word-limit
          ></el-input>
          <el-input
            v-model="callNumber"
            class="wechat-id-input device-wechat-id"
            size="small"
            placeholder="请输入号码"
            clearable
            maxlength="30"
            show-word-limit
          ></el-input>
          <el-button type="primary" size="small" @click="queryData">查询</el-button>
        </div>
        <!-- 信息展示 -->
        <el-table :data="tableData[activeName]" stripe>
          <el-table-column prop="imei" label="设备号" header-align="center" align="center"></el-table-column>
          <el-table-column prop="wechatid" label="微信id" header-align="center" align="center"></el-table-column>
          <el-table-column prop="number" label="电话号码" header-align="center" align="center"></el-table-column>
          <el-table-column prop="duration" label="时长" header-align="center" align="center"></el-table-column>
          <el-table-column label="创建时间" header-align="center" align="center">
            <template slot-scope="scope">
              <span v-text="$options.filters.transformTime2Minute(scope.row.createTime)"></span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          :current-page="callPageNo"
          :page-sizes="[20, 40, 60, 80]"
          :page-size="callPageSize"
          :pager-count="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total[activeName]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-tab-pane>

      <el-tab-pane label="短信记录" name="shortMessages">
        <!-- 搜索|新增 -->
        <div class="set-parameters">
          <el-input
            v-model="msgContent"
            class="device-wechat-id"
            size="small"
            placeholder="请输入内容"
            clearable
            maxlength="30"
            show-word-limit
          ></el-input>
          <el-input
            v-model="msgNumber"
            class="wechat-id-input device-wechat-id"
            size="small"
            placeholder="请输入号码"
            clearable
            maxlength="30"
            show-word-limit
          ></el-input>
          <el-select v-model="msgRead" size="small" placeholder="请选择阅读状态" filterable clearable>
            <el-option v-for="rs in readState" :key="rs.id" :label="rs.label" :value="rs.value"></el-option>
          </el-select>
          <el-select v-model="msgType" size="small" placeholder="请选择发送状态" filterable clearable>
            <el-option v-for="ts in typeState" :key="ts.id" :label="ts.label" :value="ts.value"></el-option>
          </el-select>
          <el-button type="primary" size="small" @click="queryData">查询</el-button>
        </div>
        <!-- 数据展示 -->
        <el-table :data="tableData[activeName]" stripe>
          <!-- <el-table-column prop="id" label="记录id" header-align="center" align="center"></el-table-column> -->
          <el-table-column prop="simid" label="短信id" header-align="center" align="center"></el-table-column>
          <el-table-column prop="imei" label="设备号" header-align="center" align="center"></el-table-column>
          <!-- <el-table-column prop="wechatid" label="微信id" header-align="center" align="center"></el-table-column> -->
          <el-table-column prop="number" label="电话号码" header-align="center" align="center"></el-table-column>
          <!-- <el-table-column prop="blocktype" label="拦截类型" header-align="center" align="center"></el-table-column> -->
          <!-- <el-table-column prop="date" label="date" header-align="center" align="center"></el-table-column> -->
          <el-table-column prop="content" label="内容" header-align="center" align="center"></el-table-column>
          <el-table-column prop="readz" label="阅读状态" header-align="center" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.readz === 'true'" style="color: #67c23a" v-text="'已读'"></span>
              <span v-else style="color: #f56c6c" v-text="'未读'"></span>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="发送状态" header-align="center" align="center">
            <template slot-scope="scope">
              <span v-text="typeMap[scope.row.type]"></span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" header-align="center" align="center">
            <template slot-scope="scope">
              <span v-text="$options.filters.transformTime2Minute(scope.row.createTime)"></span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          :current-page="msgPageNo"
          :page-sizes="[20, 40, 60, 80]"
          :page-size="msgPageSize"
          :pager-count="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total[activeName]"
          @size-change="handleMsgSizeChange"
          @current-change="handleMsgCurrentChange"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { queryCallLog, queryShortMessage } from '@/api/httpApiAdmin'

export default {
  name: 'CommonReplies',
  data() {
    return {
      activeName: 'calls',
      typeMap: {
        1: 'inbox',
        2: 'sent',
        3: 'draft',
        4: 'outbox',
        5: 'failed',
        6: 'queued'
      },
      callNumber: '',
      callType: '',
      callContent: '',
      callRecord: '',
      callImei: '',
      callPageNo: 1,
      callPageSize: 20,
      msgNumber: '',
      msgType: '',
      typeState: [
        {
          id: 'typeState0',
          value: 1,
          label: '收件箱'
        },
        {
          id: 'typeState2',
          value: 2,
          label: '发送中'
        },
        {
          id: 'typeState3',
          value: 3,
          label: '垃圾箱'
        },
        {
          id: 'typeState4',
          value: 4,
          label: '发件箱'
        },
        {
          id: 'typeState5',
          value: 5,
          label: '发送失败'
        },
        {
          id: 'typeState6',
          value: 6,
          label: '排队发送'
        }
      ], // 信息发送状态列表
      msgContent: '',
      msgRead: '',
      readState: [
        {
          id: 'readState0',
          value: 'true',
          label: '已读'
        },
        {
          id: 'readState1',
          value: 'false',
          label: '未读'
        }
      ], // 阅读状态列表
      msgPageNo: 1,
      msgPageSize: 20,

      tableData: {
        calls: [],
        shortMessages: []
      }, // 表格中的数据
      total: {
        calls: 0,
        shortMessages: 0
      } // 总数
    }
  },
  computed: {
    ...mapState({
      adminInfo: 'adminInfo'
    })
  },
  mounted() {
    // 查询术语类型列表
    this.queryCallLogListSilence()
    this.queryShortMessageListSilence()
  },
  methods: {
    // 查询通话记录
    queryCallLogList() {
      queryCallLog(
        this.adminInfo.cid,
        this.callNumber,
        this.callType,
        this.callContent,
        this.callRecord,
        this.callImei,
        this.callPageNo,
        this.callPageSize
      ).then((res) => {
        if (res.code === 0) {
          this.tableData['calls'] = res.data.rows || []
          this.total['calls'] = res.data.records || 0
          this.$message({
            type: 'success',
            message: '查询成功！',
            duration: 1000
          })
        }
      })
    },
    queryCallLogListSilence() {
      queryCallLog(
        this.adminInfo.cid,
        this.callNumber,
        this.callType,
        this.callContent,
        this.callRecord,
        this.callImei,
        this.callPageNo,
        this.callPageSize
      ).then((res) => {
        if (res.code === 0) {
          this.tableData['calls'] = res.data.rows || []
          this.total['calls'] = res.data.records || 0
        }
      })
    },
    // 查询短信记录
    queryShortMessageList() {
      queryShortMessage(
        this.adminInfo.cid,
        this.msgNumber,
        this.msgType,
        this.msgContent,
        this.msgRead,
        this.msgPageNo,
        this.msgPageSize
      ).then((res) => {
        if (res.code === 0) {
          this.tableData['shortMessages'] = res.data.rows || []
          this.total['shortMessages'] = res.data.records || 0
          this.$message({
            type: 'success',
            message: '查询成功！',
            duration: 1000
          })
        }
      })
    },
    queryShortMessageListSilence() {
      queryShortMessage(
        this.adminInfo.cid,
        this.msgNumber,
        this.msgType,
        this.msgContent,
        this.msgRead,
        this.msgPageNo,
        this.msgPageSize
      ).then((res) => {
        if (res.code === 0) {
          this.tableData['shortMessages'] = res.data.rows || []
          this.total['shortMessages'] = res.data.records || 0
        }
      })
    },
    //
    queryData() {
      if (this.activeName === 'calls') {
        this.queryCallLogList()
      } else {
        this.queryShortMessageList()
      }
    },
    handleClick(tab) {
      console.log(tab)
      // if (tab.name === 'shortMessages') {
      //   this.queryGroupSilence()
      // }
    },
    // 修改pageSize
    handleSizeChange(val) {
      if (this.callPageSize === val) return
      this.callPageSize = val
      this.queryData()
    },
    // 修改当前页
    handleCurrentChange(val) {
      this.callPageNo = val
      this.queryData()
    },
    // 修改pageSize
    handleMsgSizeChange(val) {
      if (this.msgPageSize === val) return
      this.msgPageSize = val
      this.queryData()
    },
    // 修改当前页
    handleMsgCurrentChange(val) {
      this.msgPageNo = val
      this.queryData()
    }
    // 删除
    // handleDelete(index, row) {
    //   this.$confirm('是否删除设备？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     if (this.activeName === 'calls') {
    //       // deleteReplies(row.id).then((res) => {
    //       //   if (res.code === 0) {
    //       //     const pn = Math.ceil((this.total[this.activeName] - 1) / this.pageSize)
    //       //     if (this.pageNo > pn) {
    //       //       this.pageNo = pn
    //       //     }
    //       //     this.queryDataSilence()
    //       //     this.$message({
    //       //       type: 'success',
    //       //       message: '删除成功!',
    //       //       duration: 1000
    //       //     })
    //       //   }
    //       // })
    //     } else {
    //       // deleteReplyGroup(row.id).then((res) => {
    //       //   if (res.code === 0) {
    //       //     const pn = Math.ceil((this.total[this.activeName] - 1) / this.pageSize)
    //       //     if (this.groupPageNo > pn) {
    //       //       this.groupPageNo = pn
    //       //     }
    //       //     this.queryGroupSilence()
    //       //     this.queryAllGroup()
    //       //     this.$message({
    //       //       type: 'success',
    //       //       message: '删除成功!',
    //       //       duration: 1000
    //       //     })
    //       //   }
    //       // })
    //     }
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '取消',
    //       duration: 1000
    //     })
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.common-reply {
  height: 100%;
  display: flex;
  flex-direction: column;

  .set-parameters {
    padding: 10px 5px;
    display: flex;
    align-items: center;
    border-bottom: solid $border-color-1 2px;
    .el-button,
    .wechat-id-input,
    .el-select {
      margin-left: 20px;
    }
    ::v-deep .device-wechat-id {
      width: 220px;
      .el-input__inner {
        width: 220px;
      }
    }
  }

  ::v-deep .el-tabs {
    overflow: hidden;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__content {
      flex: 1 1 auto;
      .el-tab-pane {
        height: 100%;
        display: flex;
        flex-direction: column;
        .el-table {
          flex: 1 1 auto;
        }
      }
    }
  }

  .el-pagination {
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: solid 1px $border-color-1;
    background-color: white;
  }
}
</style>
